<template>
  <div>
    <div class="container" v-if="true">
      <a-row :gutter="2">
        <a-col :span="7" class="box" style="margin-right: 15px">
          <!-- 移除 div 的固定宽度，改用 100% -->
          <div
            ref="container"
            style="
              height: 450px;
              width: 100%;
              margin: 0 auto;
              padding-top: 40px;
            "
          ></div>
        </a-col>

        <a-col :span="15" class="box">
          <!-- 移除 div 的固定宽度，改用 100% -->
          <div
            ref="container1"
            style="
              height: 450px;
              width: 100%;
              margin: 0 auto;
              padding-top: 40px;
            "
          ></div>
        </a-col>
      </a-row>
      <a-row style="margin-top: 15px">
        <a-col :span="24" class="box">
          <!-- 移除 div 的固定宽度，改用 100% -->
          <div
            ref="container2"
            style="
              height: 450px;
              width: 100%;
              margin: 0 auto;
              padding-top: 40px;
            "
          ></div>
        </a-col>
      </a-row>
    </div>
    <div
      v-else
      style="
        width: 100%;
        height: 80vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      "
    >
      <a-spin v-if="loading" :size="30">
        <template #icon>
          <icon-sync />
        </template>
      </a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted, inject } from 'vue';
  import useLoading from '@/hooks/loading';
  import {
    getEchartsabr,
    getEchartsDepts,
    getEchartsEips,
  } from '@/api/dashboard';
  function convertToEchartsFormat(x_data, y_data) {
    return x_data.map((name, index) => ({
      value: y_data[index],
      name: name,
    }));
  }
  // 注入 ECharts 实例
  const Echarts = inject('$echarts');
  const { loading, setLoading } = useLoading(true);

  // 定义 echarts 容器的 ref
  const container = ref<HTMLElement | null>(null);
  const container1 = ref<HTMLElement | null>(null);
  const container2 = ref<HTMLElement | null>(null);

  // 定义 echarts 实例
  let myChart: any;
  let myChart1: any;
  let myChart2: any;

  // 定义 echarts 配置项（动态数据部分留空）
  const option = ref({
    title: { text: '文档类型饼状图', left: 'center' },
    tooltip: {
      trigger: 'item',
      formatter: `<span style="font-weight: bold">{b}</span>: <br/>所占百分比: {c}%`, // 添加占比显示
    },
    legend: { orient: 'vertical', bottom: 'bottom' },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [],
      },
    ],
  });
  const option1 = ref({
    title: { text: '文档类型对比图', left: 'center' },
    xAxis: {
      type: 'category',
      data: [],
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: function (value) {
          return parseInt(value) + '份';
        },
        minInterval: 1,
      },
      // 可选：确保刻度从0开始
      min: 0,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: function (params) {
        return (
          params[0].name + '<br/>' + '文档数量' + ': ' + params[0].value + '份'
        );
      },
    },
    series: [
      {
        data: [],
        type: 'bar',
      },
    ],
  });
  const option2 = ref({
    title: {
      text: '各部门文档统计图',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: function (params) {
        return (
          params[0].name + '<br/>' + '文档数量' + ': ' + params[0].value + '份'
        );
      },
    },
    legend: { orient: 'vertical', bottom: 'bottom' },
    xAxis: {
      type: 'value',
      axisLabel: {
        formatter: function (value) {
          return parseInt(value) + '份';
        },
        minInterval: 1,
      },
      // 可选：确保刻度从0开始
      min: 0,
    },
    yAxis: {
      type: 'category',
      data: [], // 示例数据
    },
    series: [
      {
        type: 'bar',
        data: [], // 示例数据
      },
    ],
  });

  // 初始化 echarts 的函数
  const initEcharts = () => {
    if (!Echarts || !container.value) return;

    // 初始化实例
    myChart = Echarts.init(container.value);
    myChart1 = Echarts.init(container1.value);
    myChart2 = Echarts.init(container2.value);

    // 设置配置项
    myChart.setOption(option.value);
    myChart1.setOption(option1.value);
    myChart2.setOption(option2.value);

    // 响应式调整
    const resizeHandler = () => {
      myChart.resize();
      myChart1.resize();
      myChart2.resize();
    };
    window.addEventListener('resize', resizeHandler);

    onUnmounted(() => {
      window.removeEventListener('resize', resizeHandler);
      myChart?.dispose();
      myChart1?.dispose();
      myChart2?.dispose();
    });
  };

  // 获取数据并更新配置
  const fetchDataAndRender = async () => {
    try {
      // 并行请求三个接口
      const [data1, data2, data3] = await Promise.all([
        getEchartsEips(),
        getEchartsabr(),
        getEchartsDepts(),
      ]);

      // // 更新 option 数据（根据实际接口返回结构调整）
      option.value.series[0].data = data1.data;
      option1.value.xAxis.data = data2.data.x_data;
      option1.value.series[0].data = data2.data.y_data;
      console.log(data3);
      option2.value.yAxis.data = data3.data.x_data;
      option2.value.series[0].data = data3.data.y_data;

      // option1.value.xAxis[0].data = data2.categories;
      // option1.value.series = data2.series;
      //
      // option2.value.xAxis[0].data = data3.months;
      // option2.value.series = data3.values;

      // 初始化图表
      initEcharts();
    } catch (error) {
      console.error('请求失败:', error);
    } finally {
    }
  };

  onMounted(() => {
    fetchDataAndRender();
  });
</script>

<style scoped lang="less">
  .container {
    background: #f2f3f5;
    width: 110%;
  }

  .box {
    background: #ffffff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 5px;
    /* 确保没有内边距或边框占用额外空间 */
    border: none;
    padding: 10px;
  }
</style>
